import React,{Component} from 'react';
import NavLink from './NavLink';

// var IndexLink = require('react-router').IndexLink;

class App extends Component{
	render() {
		
		return(
			<div>
				<nav className="navbar navbar-inverse navbar-static-top">
					<div className="container">
						<div className="navbar-header">
							<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
								<span className="sr-only">Toggle navigation</span>
								<span className="icon-bar"></span>
								<span className="icon-bar"></span>
								<span className="icon-bar"></span>
							</button>
							<a className="navbar-brand" href="#"></a>
						</div>
						<div id="navbar" className="navbar-collapse collapse">
							<ul className="nav navbar-nav">
								<li><NavLink to='/' onlyActiveOnIndex>首页</NavLink></li>
								<li><NavLink to='/news' >新闻</NavLink></li>
								<li><NavLink to='/product'>产品</NavLink></li>
							</ul>
						</div>
					</div>
				</nav>
				
				<div className="container">
					{this.props.children}   {/*渲染子组件*/}
				</div>
			</div>
		)
	}
}

module.exports = App;